<%@ page import="xyz.keyon.bean.Student" %>
<%@ page import="java.util.List" %>
<%@ page import="xyz.keyon.bean.Page" %>
<%@ page contentType="text/html;charset=utf-8" language="java" %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>主页</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("tr:odd").css("background-color","lightgray");
        });
    </script>
    <style type="text/css">
        #addButton {
            display: block;
            position: relative;
            width: 60px;
            margin: auto;
        }
    </style>
</head>
<body>
    <table class="table table-bordered">
        <thead class="thead-dark">
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>地址</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <%
                //获取request域中的数据
                Page cPage = (Page)request.getAttribute("cPage") ;
                for(Student student:cPage.getStudents()){
            %>
            <tr>
                <td><a href="QueryStudentBySnoServlet?sno=<%=student.getSno() %>"><%=student.getSno() %></a></td>
                <td><%=student.getSname() %></td>
                <td><%=student.getSage() %></td>
                <td><%=student.getSaddress() %></td>
                <td> <a href="DeleteStudentServlet?sno=<%=student.getSno() %>" class="btn btn-outline-dark">删除</a> </td>
            </tr>
            <%
                }
            %>
        </tbody>
    </table>
    <a href="pages/addstudent.jsp" class="btn btn-outline-dark" id="addButton">新增</a><br/>

    <%
        if(cPage.getCurrentPage() == 1) {
    %>
            <a href="QueryAllStudentsByPageServlet?currentPage=<%=cPage.getCurrentPage()+1%>&pSize=<%=cPage.getPageSize()%>">下一页</a>
            <a href="QueryAllStudentsByPageServlet?currentPage=<%=cPage.getTotalPage()%>&pSize=<%=cPage.getPageSize()%>">尾页</a>
    <%
        } else if(cPage.getCurrentPage() == cPage.getTotalPage()) {
            //如果当前页为首页
    %>
            <a href="QueryAllStudentsByPageServlet?currentPage=1&pSize=<%=cPage.getPageSize()%>">首页</a>
            <a href="QueryAllStudentsByPageServlet?currentPage=<%=cPage.getCurrentPage()-1%>&pSize=<%=cPage.getPageSize()%>">上一页</a>
    <%
        } else {
    %>
            <a href="QueryAllStudentsByPageServlet?currentPage=1&pSize=<%=cPage.getPageSize()%>">首页</a>
            <a href="QueryAllStudentsByPageServlet?currentPage=<%=cPage.getCurrentPage()-1%>&pSize=<%=cPage.getPageSize()%>">上一页</a>
            <a href="QueryAllStudentsByPageServlet?currentPage=<%=cPage.getCurrentPage()+1%>&pSize=<%=cPage.getPageSize()%>">下一页</a>
            <a href="QueryAllStudentsByPageServlet?currentPage=<%=cPage.getTotalPage()%>&pSize=<%=cPage.getPageSize()%>">尾页</a>
    <%
        }
    %>

    <br/>
    每页显示
    <select id="pageSize">
        <option value="3">3</option>
        <option value="5">5</option>
        <option value="10">10</option>
    </select>
    <script>
        $(document).ready(function(){
            document.getElementById("pageSize").value = <%=cPage.getPageSize()%>;
        });
        $("#pageSize").change(function(){
            var pageSize = $(this).children('option:selected').val();
            var url = "QueryAllStudentsByPageServlet?pSize=" + pageSize;
            window.location.href = url;
        });
    </script>
</body>
</html>
